import { UpOutlined } from '@ant-design/icons';
import { Button, Space, Spin, Typography } from 'antd';
import cls from 'classnames';
import dayjs from 'dayjs';
import { useCallback } from 'react';
import styles from './index.less';

const Console = ({
  open = false,
  setOpen,
  onRun,
  onCommit,
  result,
  running,
}) => {
  const handleOpen = useCallback(() => {
    setOpen((v) => !v);
  }, []);

  return (
    <div className={styles.console}>
      {open && (
        <>
          <div className="c-header">
            <Space>
              <b>Result</b>
              <span className="ch-time">
                {result?.time
                  ? dayjs(result.time).format('YYYY-MM-DD-HH:mm:ss')
                  : null}
              </span>
            </Space>
          </div>
          <div className="c-content">
            {(() => {
              if (running) {
                return (
                  <Space>
                    <span>Executing...</span>
                    <Spin />
                  </Space>
                );
              }
              if (!result) {
                return null;
              }
              return (
                <Space direction="vertical" style={{ width: '100%' }}>
                  {result.error ? (
                    <>
                      <Typography.Title level={3} type="danger">
                        Error
                      </Typography.Title>
                      <pre>{result.error}</pre>
                    </>
                  ) : (
                    <>
                      <Typography.Title level={3} type="success">
                        Success
                      </Typography.Title>
                      <pre>{result.output}</pre>
                    </>
                  )}
                </Space>
              );
            })()}
          </div>
        </>
      )}
      <div className="c-footer">
        <div className="cf-left">
          <Button
            className="cf-btn"
            type="text"
            size="small"
            onClick={handleOpen}
          >
            <Space size={4}>
              <span>Console</span>
              <span
                className={cls('console-arrow', {
                  open,
                })}
              >
                <UpOutlined />
              </span>
            </Space>
          </Button>
        </div>
        <div className="cf-right">
          <Space>
            <Button loading={running} onClick={onRun} type="primary">
              Run
            </Button>
            {/* <Button loading={running} onClick={onCommit} type="primary">
              Commit
            </Button> */}
          </Space>
        </div>
      </div>
    </div>
  );
};

export default Console;
